<template>
  <el-row>
    <!-- Left Section -->
    <el-col :span="10">
      <div class="data_list">
        <el-card class="list-card">
          <div class="Device_return">
            <p class="dev_code">设备唯一码</p>
            <el-input
                class="dev_input"
                placeholder="请输入或扫码"
                suffix-icon="el-icon-saoma"
                v-model="device_input" clearable>
            </el-input>
            <el-button type="primary" class="dev_button" @click="show_salesreturn">确定</el-button>
          </div>
          <div class="Model_code">
            <p class="model_code">关联机型代码</p>
            <el-select v-model="value" placeholder="请选择" class="model_select" filterable allow-create clearable>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <p class="net_code">已关联{{GLnum}}个机型代码</p>
          </div>
        </el-card>
        <el-card class="table_data" style="margin-top: 20px; height: auto">
          <div class="head">
            <h3 class="device_head"></h3>
          </div>
          <el-table ref="multipleTable" :data="salesreturn_list" @selection-change="handleSelectionChange" @current-change="handleCurrentChange"
                    style="width: 100%" height="500px" highlight-current-row v-loading="loading1">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column v-for="(val, key) in salesreturn_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)" :show-overflow-tooltip="true">
              <!--              <template v-slot:default="scope">-->
              <!--                <span @click="showDeviceInfo(scope.row)">{{ scope.row[key] }}</span>-->
              <!--              </template>-->
            </el-table-column>
          </el-table>
          <!-- 按钮 -->
          <div class="button-container">
            <div class="button-row">
              <el-button type="primary" class="dev_button" @click="openDialog">退货</el-button>
              <el-button class="dev_button cancel">取消</el-button>
            </div>
          </div>
          <el-dialog
              :visible.sync="dialogVisible"
              :title="'确认对'+ selectedNum +'台设备进行退货'"
              width="40%"
              :before-close="handleClose"
              center>
            <el-input
                type="textarea"
                :rows="6"
                v-model="returnReason"
                placeholder="请输入退货理由">
            </el-input>

            <span slot="footer" class="dialog-footer">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="handleConfirm">确定</el-button>
            </span>
          </el-dialog>
        </el-card>
      </div>
    </el-col>


    <!-- Right Section -->
    <el-col :span="14">
      <div class="data_detail">
        <el-card class="choose-card" style="margin-left: 20px;height:auto">
          <el-empty v-if="!selectedDevice" description="暂无设备信息" style="height: 100vh">
            <template #image>
              <div class="custom-empty-content">
                <img src="https://img2.imgtp.com/2024/04/03/fhG64MFW.png" class="custom-image">
              </div>
            </template>
          </el-empty>
          <!-- 显示详细信息 -->
          <div v-else>
            <!-- 在这里放置详细信息内容 -->
            <div class="head">
              <h3 class="title"></h3>
            </div>
            <div class="detail">
              <el-descriptions class="dt" :columns="2" size="mini" v-loading="loading2">
                <el-descriptions-item label="设备名称" span="2">
                  {{ device_detail.devType }}
                  <el-tag
                      size="small"
                      :type="getTagType(parseInt(device_detail.devState))"
                      class="dt_tag">
                    {{ getTagLabel(parseInt(device_detail.devState)) }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="设备唯一码" span="2">{{ device_detail.devGuid }}</el-descriptions-item>
                <el-descriptions-item label="工单号" span="2">
                  {{ device_detail.workOrderCode }}
                  <i class="el-icon-list" @click="openMessageBox" style="color:#165DFF "></i>
                </el-descriptions-item>
                <el-descriptions-item label="箱子编号" span="2">
                  {{ device_detail.boxCode }}
                  <i class="el-icon-list"></i>
                </el-descriptions-item>
                <el-descriptions-item label="销售单号" span="2">
                  {{ device_detail.saleCode }}
                  <i class="el-icon-list"></i>
                </el-descriptions-item>
                <el-descriptions-item label="产品序列号" span="2">{{ device_detail.devSerialNumber }}</el-descriptions-item>
                <el-descriptions-item label="机型代码" span="2">{{ device_detail.devCode }}</el-descriptions-item>
                <el-descriptions-item label="硬件信息" span="2">{{ device_detail.devHardware }}</el-descriptions-item>
                <el-descriptions-item label="生产时间" span="2">{{ device_detail.mfgTime }}</el-descriptions-item>
                <el-descriptions-item label="核心模块版本" span="2">{{ device_detail.devSoftware1 }}</el-descriptions-item>
                <el-descriptions-item label="客户名称" span="2">{{ device_detail.client }}</el-descriptions-item>
                <el-descriptions-item label="报警模块版本" span="2">{{ device_detail.devSoftware2 }}</el-descriptions-item>
                <el-descriptions-item label="操作员" span="2">{{ device_detail.user }}</el-descriptions-item>
              </el-descriptions>

            </div>
            <div class="tabs">
              <el-tabs v-model="activeName">
                <el-tab-pane name="first" label="入库记录">
                  <el-table :data="instock_list" style="width: 100%" max-height="500px">
                    <el-table-column v-for="(val, key) in instock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="出库记录" name="second">
                  <el-table :data="outstock_list" style="width: 100%" max-height="500px" >
                    <el-table-column v-for="(val, key) in outstock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="退货记录" name="third">
                  <el-table :data="retstock_list" style="width: 100%" max-height="500px">
                    <el-table-column v-for="(val, key) in retstock_label" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)"/>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="维修记录" name="fourth">
                  <el-table :data="fixTable" style="width: 100%" max-height="500px">
                    <el-table-column v-for="(val, key) in fixLabel" :prop="key" :label="val" :key="key" />
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="返工记录" name="fifth">
                  <el-table :data="reworkTable" style="width: 100%" max-height="500px">
                    <el-table-column v-for="(val, key) in reworkLabel" :prop="key" :label="val" :key="key" />
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      GLnum:0,
      loading1: false,
      loading2: false,
      submitDevice:0,
      submitList:[],
      activeName:'first',
      dialogVisible: false,
      returnReason:'',
      device_input:'',
      selectedNum: 0,
      salesindex:1,
      selected_devId:0,
      salesreturn_list:[],
      salesreturn_label:{
        index:'序号',
        devCode:'机型代码',
        devGuid:'设备唯一码',
        client:'客户名称',
        devTypename:'退货设备'
      },
      instock_list: [], // 入库列表数据
      instock_label: {
        index: "序号",
        devCode: "机型代码",
        boxCode: "箱子编号",
        time: "入库时间",
        worker: "操作员"
      },
      outstock_list:[],
      outstock_label: {
        index: "序号",
        client: "客户名称",
        outstockTime: "出库时间",
        worker: "操作员"
      },
      retstock_list:[],
      retstock_label:{
        index: "序号",
        reason: "退货原因",
        time: "退货时间",
        worker: "操作员",
        description: "备注"
      },
      device_detail:{
        devType:'',
        devGuid:'',
        workOrderCode:'',
        boxCode:'',
        devSerialNumber:'',
        devCode:'',
        devHardware:'',
        mfgTime:'',
        devSoftware1:'',
        devSoftware2:'',
        client:'',
        user:'',
        devState:'',
        saleCode:''
      },
      backTable:[
        {
          index:1,
          reason:"按钮失灵",
          time:"2024-03-19 15:20",
          worker:"张三",
          description:"-"
        },
        {
          index:2,
          reason:"按钮失灵",
          time:"2024-02-11 15:20",
          worker:"张三",
          description:"-"
        },
        {
          index:3,
          reason:"磨损",
          time:"2024-02-10 15:20",
          worker:"张三",
          description:"-"
        },
        {
          index:4,
          reason:"按钮失灵",
          time:"2024-01-15 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:5,
          reason:"按钮失灵",
          time:"2024-01-01 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:6,
          reason:"按钮失灵",
          time:"2024-12-19 18:30",
          worker:"张三",
          description:"-"
        }
      ],
      backLabel: {
        index: "序号",
        reason: "退货原因",
        time: "返工时间",
        worker: "操作员",
        description: "备注"
      },
      fixTable:[
        {
          index:1,
          c_device:"63123456701234",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"听筒喇叭无声,并存在电流",
          solution:"-",
          time:"2024-03-14 18:30",
        },
        {
          index:2,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"无法正常提醒",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:3,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"通讯故障",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:4,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"未知",
          solution:"-",
          time:"2024-03-14 18:30"
        },
        {
          index:5,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"按钮失灵",
          solution:"-",
          time:"2024-03-14 18:30"
        }
      ],
      fixLabel: {
        index: "序号",
        c_device: "更换设备唯一码",
        c_message: "修改硬件信息",
        c_h_version: "变更核心模块版本",
        c_b_version: "变更报警模块版本",
        content: "故障内容",
        solution: "解决方案",
        time: "维修时间"
      },
      reworkTable:[
        {
          index:1,
          c_device:"63123456701234",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"听筒喇叭无声",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:2,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"无法正常提醒",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:3,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:4,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:5,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
        },
        {
          index:6,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        },
        {
          index:7,
          c_device:"-",
          c_message:"-",
          c_h_version:"-",
          c_b_version:"-",
          content:"外壳掉漆",
          time:"2024-03-14 18:30",
          worker:"张三",
          description:"-"
        }
      ],
      reworkLabel: {
        index: "序号",
        c_device: "更换设备唯一码",
        c_message: "修改硬件信息",
        c_h_version: "变更核心模块版本",
        c_b_version:"变更报警模块版本",
        content: "返工内容",
        time: "返工时间",
        worker: "操作员",
        description: "备注"
      },
      selectedDevice: null,
      options: [{
        value: '选项1',
        label: 'B150'
      }, {
        value: '选项2',
        label: 'B151'
      }, {
        value: '选项3',
        label: 'B152'
      }],
      value: '',
      activeTab: 'first'
      // Add activeTab data property
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.selectedDevice = val;
      // this.getDevId(val.devGuid)
      //     .then(devId => {
      //       val.devId = devId;
      //       console.log(val.devId);
      //       this.fetchDetailInfo(devId);
      //     })
      //     .catch(error => {
      //       console.error("Error:", error);
      //     });
      this.fetchDetailInfo(val.devId);
    },
    handleSelectionChange(val) {
      console.log(val);
      this.salesreturn_list.forEach(item => {
        item.selected = false;
      });
      val.forEach(item => {
        item.selected = true;
      });
      this.$nextTick(() => {
        this.getSelectedNum();
      });
    },
    openMessageBox() {
      this.dialogVisible = true;
    },
    openDialog() {
      console.log(this.selectedNum);
      console.log('id'+ this.submitDevice);
      console.log('list'+ this.submitList);
      if(this.selectedNum === 0)
      {
        this.$message({
          message: '请选择设备!',
          type: 'error'
        });
      }
      else
        this.dialogVisible = true;
    },
    handleClose(done) {
      if (this.returnReason.trim() === '') {
        this.$message.error('请输入退货理由');
        done(false); // 阻止对话框关闭
      } else {
        done(); // 关闭对话框
      }
    },
    handleConfirm() {
      if(this.selectedNum === 1)
      {
        this.$axios.post('/api/Retstock/Record',
            {
              devId: this.submitDevice,
              retstockReason: this.returnReason
            },
            {
              headers: {
                'Accept': 'application/json',
                'Content-Type': "application/json;charset=UTF-8",
                'token':this.token
              }
            }
        ).then(res=>{
          console.log(res.data);
          if(res.data.code === 0)
          {
            this.$message({
              message: '退货成功',
              type: 'success'
            });
            // 如果成功退货，通过devid找到对应列表行，并删除这一行
            let index = this.salesreturn_list.findIndex(item => item.devId === this.submitDevice);
            if(index !== -1) {
              this.salesreturn_list.splice(index, 1);
            }
          }
          else if(res.data.code === -99)
          {
            this.$message({
              message: '登录已过期',
              type: 'error'
            });
            this.$router.push('/login');
          }
          else
          {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch(error=>{
          console.log(error);
        });
      }
      else {
        this.$axios.post('/api/Retstock/MultiRecord',
            {
              idList: this.submitList,
              Reason: this.returnReason
            },
            {
              headers: {
                'Accept': 'application/json',
                'Content-Type': "application/json;charset=UTF-8",
                'token': this.token
              }
            }
        ).then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.$message({
              message: '退货成功',
              type: 'success'
            });
            // 如果成功退货，遍历submitList，分别找到每个devId对应的项目，并从salesreturn_list中删除
            for(let id of this.submitList){
              let index = this.salesreturn_list.findIndex(item => item.devId === id);
              if(index !== -1) {
                this.salesreturn_list.splice(index, 1);
              }
            }
          }
          else if(res.data.code === -99)
          {
            this.$message({
              message: '登录已过期',
              type: 'error'
            });
            this.$router.push('/login');
          }
          else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          console.log(error);
        });
      }
      // 在此处处理确认退货逻辑，可以发送请求等操作
      // 此处只是简单示例，打印退货理由
      // 关闭对话框
      this.dialogVisible = false;
    },
    show_salesreturn() {
      if (!this.device_input) {
        this.$message({
          message: '输入框不能为空！',
          type: 'warning'
        });
        return; // 结束函数执行
      }
      this.loading1 = true;
      this.$axios.get('/api/Device/ListByGuid',{
        params:{
          devGuid:this.device_input
        },
        headers:{
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token':this.token
        }
      }).then(res=>{
        console.log(res.data);
        // 遍历响应中的body数组
        if(res.data.code === -99)
        {
          this.$message({
            message: '登录已过期',
            type: 'error'
          });
          this.$router.push('/login');
        }
        else if(res.data.code === 0)
        {
          this.GLnum = 0;
          this.options=[];
          this.GLnum = res.data.body.data.length;
          if(this.GLnum > 1)
          {
            this.options = res.data.body.data.map(item => ({value: item.devCode, label: item.devCode}));
            this.$message({
              message: '该唯一码对应多个机型代码，请先筛选',
              type: 'warning'
            });
          }
          else{
            Promise.all(res.data.body.data.map(item=>{
              if(item.devCode === this.value || this.value === '')
              {
                let newdata={
                  index:this.salesindex++,
                  devCode:item.devCode,
                  saleCode:item.saleCode,
                  client: item.client,
                  devTypename: item.box_Type.devTypeName,
                  devGuid: item.devGuid,
                  selected:false,
                  devId:0
                };
                return this.getDevId(newdata.devGuid)
                    .then(devId => {
                      newdata.devId = devId;
                      return newdata;
                    })
                    .catch(error => {
                      console.error("Error:", error);
                      return newdata;
                    });
              }
            })).then(dataWithIds => {
              this.salesreturn_list.push(...dataWithIds.filter(Boolean));
              this.loading1 = false;
            });
          }
        }
        else
        {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch(err=>{
        console.log(err);
        this.$message({
          message: err,
          type: 'error'
        });
      })
    },
    getSelectedNum(){
      this.submitDevice = null;
      this.submitList = [];
      let selectedItems = this.salesreturn_list.filter(item => item.selected);
      if (selectedItems.length === 1) {
        // 如果只有一个被选择，记录它在 submitDevice 中。
        this.submitDevice = selectedItems[0].devId;
      } else {
        // 如果没有被选中的项，或者选中的项多于一项，将所有选中的项的devId存入submitList中
        this.submitList = selectedItems.map(item => item.devId);
      }

      // 获取选中的个数
      this.selectedNum = selectedItems.length;
    },
    salesrestock() {
      this.getSelectedNum();
      console.log(this.selectedNum);
    },
    closeDialog(){
      this.dialogVisible=false;
      this.$message({
        message: '已取消退货',
        type: 'warning'
      });
    },
    getDevId(devGuid) {
      return new Promise((resolve, reject) => {
        this.$axios.get('/api/Device/InfoByGuid', {
          params: {
            devGuid: devGuid
          },
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8',
            'token': this.token
          }
        }).then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.selected_devId = res.data.body.devId;
            resolve(this.selected_devId); // 将this.selected_devId作为参数传递给resolve
          }
          else if(res.data.code === -99)
          {
            this.$message({
              message: '登录已过期',
              type: 'error'
            });
            this.$router.push('/login');
          }
          else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
            reject(res.data.msg); // 异步操作失败，使用 reject 返回错误信息
          }
        }).catch(err => {
          this.$message({
            message: err,
            type: 'error'
          });
          reject(err); // 捕获到错误，使用 reject 返回错误信息
        });
      });
    },
    fetchDetailInfo(devId) {
      this.loading2 = true;
      // 发送 GET 请求，获取详细信息
      this.$axios.get('/api/Device/InfoById', {
        params: {
          devId: devId
        },
        headers:{
          'Accept': 'application/json',
          'Content-Type': "application/json;charset=UTF-8",
          'token':this.token
        }
      })
          .then(res => {
            // 处理响应数据
            console.log(res.data);
            this.device_detail.boxCode = this.ifboxCodeNull(res.data.body.box_Record);
            this.device_detail.user = res.data.body.user.userName;
            this.device_detail.devCode = res.data.body.devCode;
            this.device_detail.devGuid = res.data.body.devGuid;
            this.device_detail.devHardware = res.data.body.devHardware;
            this.device_detail.devSerialNumber = res.data.body.devSerialNumber;
            this.device_detail.devSoftware1 = res.data.body.devSoftware1;
            this.device_detail.devSoftware2 = res.data.body.devSoftware2;
            this.device_detail.mfgTime = res.data.body.mfgTime;
            this.device_detail.client = res.data.body.client;
            this.device_detail.workOrderCode = res.data.body.workOrderCode;
            this.device_detail.devState = res.data.body.devState;
            this.device_detail.saleCode = res.data.body.saleCode;
            this.device_detail.devType = res.data.body.devType.devTypeName;

            this.instock_list = [];
            res.data.body.instock.forEach(item => {
              let newData = {
                index: item.instockId,
                devCode: item.device.devCode,
                boxCode: item.box.boxCode,
                time: item.instockTime,
                worker: item.user.userName,
              };
              this.instock_list.push(newData);
            });
            this.outstock_list = [];
            res.data.body.outstock.forEach(item => {
              let newData = {
                index: item.outstockId,
                client: item.device.client,
                outstockTime: item.outstockTime,
                worker: item.user.userName,
              };
              this.outstock_list.push(newData);
            });
            this.retstock_list=[];
            res.data.body.retstock.forEach(item => {
              let newData = {
                index: item.retstockId,
                reason: item.retstockReason,
                time: item.retstockTime,
                worker: item.user.userName,
              };
              this.retstock_list.push(newData);
            });
            this.loading2 = false;
          })
          .catch(error => {
            console.error('获取详细信息失败:', error);
          });
    },
    getTagType(devState) {
      if (devState === 1) {
        return 'success';
      } else if (devState === 2) {
        return '';
      } else if (devState === 3) {
        return 'warning';
      } else if (devState === 4) {
        return 'danger';
      } else {
        return "";
      }
    },
    getTagLabel(devState){
      if (devState === 1) {
        return "生产完成";
      } else if (devState === 2) {
        return "入库";
      } else if (devState === 3) {
        return "出库";
      } else if (devState === 4) {
        return "报废";
      } else {
        return "未知状态";
      }
    },
    getColumnWidth(key) {
      // 返回不同列的宽度
      if (key === 'index') {
        return '50px'; // 设置boxCode列的宽度为150px
      }
    },
    ifnull(item){
      if(item==null)
      {
        return '-';
      }
      else
      {
        return item;
      }
    },
    ifboxCodeNull(item){
      if(item==null)
      {
        return '-';
      }
      else
      {
        return item.boxCode;
      }
    },
  },
  created() {
    this.token = localStorage.getItem('token')
  },
};
</script>


<style  lang="less" scoped>
.list-card {
  height: 300px;
  .Device_return {
    margin-top: 20px; /* 向上移动内容*/
    margin-left: 20px;
    display: flex;
    align-items: center; /* 垂直居中 */

    .dev_code {
      font-size: 14px;
      color: #999999;
      width: 20%; /* 设置 p 元素的宽度比例 */
      margin-left: 10px; /* 调整左边距 */
      margin-right: 5px; /* 设置 p 元素和 input 元素之间的间距 */
    }
    .box_input {
      width:70%;
    }
  }
  .Model_code {
    margin-top: 40px;
    display: flex;
    align-items: center; /* 垂直居中 */
    .model_code {
      font-size: 14px;
      color: #999999;
      width: 30%; /* 设置 p 元素的宽度比例 */
      margin-left: 20px;
      margin-right: 10px; /* 调整左边距 */
    }

    .model_select {
      width: 60%;
    }

    .net_code {
      font-size: 10px;
      color: #999999;
      margin-left: 20px;
      margin-right: 10px; /* 调整左边距 */
    }
  }


  .Device_code{
    display: flex;
    align-items: center; /* 垂直居中 */
    //.dev_code {
    //  font-size: 14px;
    //  color: #999999;
    //  width: 20%; /* 设置 p 元素的宽度比例 */
    //  margin-right: 5px; /* 设置 p 元素和 input 元素之间的间距 */
    //}

  }.dev_input {
     width:70%;
   }
  .dev_button {
    margin-left: 10px;
  }
}
.data_detail {
  .detail{
    margin-top: 20px;
    .dt{
      .dt_tag{
        margin-left: 10px;
      }
    }
  }
  .tabs{
    margin-top: 20px;
  }
}
.my_content{
  margin-right: 20px;
}
.title::before {
  content: '设备履历表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}

.device_head::before {
  content: '待退货列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //position: relative; /* 设置相对定位 */
  //top: 50px; /* 调整标题向上偏移的距离 */
}
.button-container {
  display: flex;
  justify-content: center; /* 将按钮水平居中 */
  margin-top: 10px;
}

.button-row {
  display: flex;
  flex-direction: row; /* 将按钮水平排列 */
  margin-top: 10px;
}

.cancel {
  margin-left: 60px; /* 添加按钮之间的间距 */
}

</style>